<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<meta name="keywords" content="">
	<meta name="description" content="">
<head>
	<link rel="stylesheet" href="/css/bootstrap.min.css" />
	<!--bootstrap图片上传插件  -->
	<link href="/fileinput/fileinput.min.css" rel="stylesheet">
	<!--风格css框架  -->
	<link href="/fileinput/theme.css" rel="stylesheet">
	<!--图标字体框架  -->
	<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="/css/layui.css" rel="stylesheet">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
					      <input type="file" id="img"  name="img" multiple="multiple" class="file-loading" >
					</div>
				</div>
			</div>
			
	</div>
	</div>
		<!-- 全局js -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script type="text/javascript" src="/fileinput/fileinput.min.js"></script>  <!--bootstrap图片上传插件  -->
	<script type="text/javascript" src="/fileinput/theme.js"></script>   <!--风格  -->
	<script type="text/javascript" src="/fileinput/zh.js"></script>      <!--汉化  -->
	<script src="/js/plugins/layer/layer.min.js"></script>   <!--layer弹框js  -->

<script th:inline="javascript">
// 初始化获取原有文件    
$(function(){    
	$.ajax({         
		type : "get",         
		url : '/system/companyPicture/uploadpre?id='+[[${id}]]+'',         
		dataType : "json",         
		success : function(data) {          
		    if(data != null){
		    	showPhotos(data); 
		    }else{
		    	 var commId = "";
				 $("#img").fileinput({
			        language: "zh",  //国际化
			        theme: 'fa',  //显示主题
			        enctype: 'multipart/form-data',
			        uploadUrl: '/system/companyPicture/savePic?id='+[[${id}]]+'', // 上传的地址
			        showRemove : true, //是否显示移除按钮
			        showPreview : true, //是否显示预览
			        showUpload: true, //是否显示上传按钮
			        showCaption: true, //是否显示选择输入框
			        uploadAsync: false, //是否允许异步上传
			        maxFileSize:  2048, //允许上传文件的大小（KB）
			        maxFilesNum:  0,  //允许上传文件的数量
			        maxFileCount: 10, //表示允许同时上传的最大文件个数
			        dropZoneEnabled: true,//是否显示拖拽区域
			        initialPreviewShowDelete:true, 
			        overwriteInitial: false,
			        initialPreviewAsData: true,
			        initialPreview: previewJson,
			        initialPreviewConfig: preConfigList,  
			        //initialPreview: [
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433412030.png?Expires=1852793412&OSSAccessKeyId=LTAIOp3OUSc0LaCD&Signature=oKjS0vI2loEogWMXOJS9JZhXLLE%3D",
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433712923.png",
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433712923.png"
			                    /// ],
		            //initialPreviewConfig: [
		                //{caption: "1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
		                //{caption: "2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
		                //{caption: "3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
		            //],
			        fileType: "any",
			        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
			    });
			    
		    }
			        
			},         
		error: function(XMLHttpRequest, textStatus, errorThrown) {                
			layer.msg('操作失败！');                 
			}     
			});         
		});  		
		function showPhotos(djson){       
			//后台返回json字符串转换为json对象           
			var reData = eval(djson);       
			// 预览图片json数据组       
			var preList = new Array();       
			for ( var i = 0; i < reData.length; i++) {          
				var array_element = reData[i].url;
			    var id = reData[i].id;                      
					// 图片类型              
					//preList[i]="<img src="array_element">";
					// 图片类型              
					preList[i]=array_element;  
				}       
				var previewJson = preList;       
				// 与上面 预览图片json数据组 对应的config数据       
		        var preConfigList = new Array();       
				for ( var i = 0; i < reData.length; i++) {         
					 var array_element = reData[i];          
					 var tjson = {
								caption: array_element.url, 
								// 展示的文件名                     
								width: '120px',                       
								url: '/system/companyPicture/removeByid', 
								// 删除url                      
								key: array_element.id, 
								// 删除是Ajax向后台传递的参数                     
								extra: {id: array_element.id}                     
					    };
					preConfigList[i] = tjson;       
				}
		         var commId = "";
				 $("#img").fileinput({
			        language: "zh",  //国际化
			        theme: 'fa',  //显示主题
			        enctype: 'multipart/form-data',
			        uploadUrl: '/system/companyPicture/savePic?id='+[[${id}]]+'', // 上传的地址
			        showRemove : true, //是否显示移除按钮
			        showPreview : true, //是否显示预览
			        showUpload: true, //是否显示上传按钮
			        showCaption: true, //是否显示选择输入框
			        uploadAsync: false, //是否允许异步上传
			        maxFileSize:  2048, //允许上传文件的大小（KB）
			        maxFilesNum:  0,  //允许上传文件的数量
			        maxFileCount: 10, //表示允许同时上传的最大文件个数
			        dropZoneEnabled: true,//是否显示拖拽区域
			        initialPreviewShowDelete:true, 
			        overwriteInitial: false,
			        initialPreviewAsData: true,
			        initialPreview: previewJson,
			        initialPreviewConfig: preConfigList,  
			        //initialPreview: [
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433412030.png?Expires=1852793412&OSSAccessKeyId=LTAIOp3OUSc0LaCD&Signature=oKjS0vI2loEogWMXOJS9JZhXLLE%3D",
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433712923.png",
		                 //"http://suyongapp.oss-cn-beijing.aliyuncs.com/1537433712923.png"
			                    /// ],
		            //initialPreviewConfig: [
		                //{caption: "1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
		                //{caption: "2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
		                //{caption: "3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
		            //],
			        fileType: "any",
			        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
			    });
			    
			  
		 }  
		
	  

</script>

</body>
</html>
